<template>
  <div v-title data-title="消息中心" class="message-container">
    <tabs :tabsList="tabsList" :curId="currentId" @switchTab="switchTab"></tabs>
    <my-scroll ref="myScroll" class="message-scroll" :data="messageList"  v-if="messageList.length && !loadding">
      <transition-group tag="div" ref="list">
        <system-message class="message-card" :key="index" :data="m" v-for="(m,index) in messageList"></system-message>
      </transition-group>
    </my-scroll>
    <no-news v-if="!messageList.length && !loadding"></no-news>
    <loading class="loading" v-show="loadding"></loading>
  </div>
</template>
<script>
  import tabs from '@/components/tabs'
  import MyScroll from '@/components/betterScroll'
  import SystemMessage from '@/components/message'
  import NoNews from '@/components/noNews.vue'
  import Loading from '@/components/loading/loading'
  export default {
    name:'message',
    data(){
      return{
        loadding:false,
        currentId:'service',
        tabsList:[{
          name:'服务通知',
          id:'service'
        },{
          name:'系统通知',
          id:'system'
        }],
        messageList:[]
      }
    },
    components:{
      tabs,MyScroll,SystemMessage,
      Loading,
      NoNews
    },
    methods:{
      switchTab(id){
        this.currentId = id;
        if(id==='service'){
          this.messageList = [];
        }else {
          this.messageList =[{
            title:'版本更新1.3.0',
            content:'1.首页新增：现金贷入口，位置信息，消息通知;2.个人中心页面展示优化;3.推广分享页面优化，添加等级，推广越多，等级越高;4.个人银行卡绑定',
            date:'2019-02-18  '
          }]
        }
      }
    },
    created(){

    }
  }
</script>
<style lang="stylus" scoped>
.message-container
  background-color #f6f6f6
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  .message-scroll
    overflow hidden
    background-color #f6f6f6
    padding .24rem .24rem
    box-sizing content-box
    position absolute
    top 1.05rem
    bottom 0
    left 0
    right 0
    z-index 0
    .message-card
      margin-bottom .24rem
  .loading
    position absolute
    top 50%

</style>
